<template>
  <div>
    <fieldset>
      <legend>商品列表</legend>
      <div id="app">
        <div class="add">
          编号:<input type="text" v-model="goodsId" /> 品牌名称:<input
            type="text"
            v-model="goodsName"
          />
          <br />
          产品图片地址:<input type="text" v-model="goodsAddress" />

          价格:<input type="text" v-model="goodsPrice" />
          <button @click="addFn">添加</button>
        </div>

        <div class="add">
          品牌名称:<input type="text" placeholder="请输入搜索条件" />
        </div>

        <div>
          <table class="tb">
            <tr>
              <th>
                全选
                <input type="checkbox" v-model="status" @change="allChoseFn" />
              </th>
              <th>产品图片</th>
              <th>编号</th>
              <th>品牌名称</th>
              <th>价格</th>
              <th>数量</th>
              <th>操作</th>
            </tr>
            <tr v-for="(item, index) of info" :key="item.id">
              <td>
                <input
                  type="checkbox"
                  :value="item"
                  v-model="chosenList"
                  @change="choseFn()"
                />
              </td>
              <td>
                <img :src="item.imgSrc" height="50" width="50" alt="" />
              </td>
              <td>{{ item.code }}</td>
              <td>{{ item.productName }}</td>
              <td>{{ item.price }}</td>
              <td>
                <button @click="decFn(index)">-</button>
                &nbsp;
                {{ item.count }}
                &nbsp;
                <button @click="item.count++">+</button>
              </td>
              <td>
                <button @click="delFn(index)">删除</button>
              </td>
            </tr>
            <!-- 动态生成内容tr -->
          </table>
          <div :class="['add', 'other']" v-show="!info.length">
            没有更多数据了哦
          </div>
        </div>
        <h2>总价格：{{ sumPrice }}</h2>
        <div>{{ chosenList }}</div>
      </div>
    </fieldset>
  </div>
</template>
<script>
let local = {
  get(key) {
    return JSON.parse(localStorage.getItem(key));
  },
  set(key, value) {
    localStorage.setItem(key, JSON.stringify(value));
  },
};
let initialData = [
  {
    id: 1,
    code: 1,
    imgSrc:
      "https://tse1-mm.cn.bing.net/th/id/R-C.fc48d5b3c65b7b79980ab09dfc2890d8?rik=jy07dRFBQAwjzw&riu=http%3a%2f%2f5b0988e595225.cdn.sohucs.com%2fimages%2f20190322%2fe2edee9d2ee847f0b564fcbadf356a46.jpeg&ehk=cKT9XpGfozyLcO5sia93t8gLeJurN9RM%2boqkkCk6a7Q%3d&risl=&pid=ImgRaw&r=0&sres=1&sresct=1",
    productName: "坤坤的背带裤",
    price: 9.9,
    count: 1,
  },
  {
    id: 2,
    code: 2,
    imgSrc:
      "https://tse3-mm.cn.bing.net/th/id/OIP-C.U2zPWJK7Gus24zXyQWwi0AHaEG?pid=ImgDet&rs=1",
    productName: "品如的衣服",
    price: 19.9,
    count: 1,
  },
  {
    id: 3,
    code: 3,
    imgSrc:
      "https://static1.paizi.com/uploadfile/2018/0710/20180710095354871.jpg",
    productName: "秀儿的秋裤",
    price: 9.9,
    count: 1,
  },
];

export default {
  data() {
    return {
      info: local.get("info-data") ?? initialData,
      chosenList: [],
      status: false,
      goodsId: "",
      goodsName: "",
      goodsAddress: "",
      goodsPrice: "",
    };
  },
  methods: {
    decFn(i) {
      // console.log(i);
      if (this.info[i].count > 1) {
        this.info[i].count--;
      } else {
        this.info[i].count = 1;
      }
    },
    delFn(index) {
      // console.log(index);
      this.info.splice(index, 1);
      //将info数据存到本地
      local.set("info-data", this.info);
    },
    choseFn() {
      this.chosenList.push();
      // console.log(this.chosenList);
      if (this.chosenList.length === this.info.length) {
        this.status = true;
      } else {
        this.status = false;
      }
    },
    allChoseFn() {
      this.chosenList = this.status ? this.info : [];
    },
    addFn() {
      this.info.push({
        id: this.goodsId,
        code: this.info.length + 1,
        imgSrc: this.goodsAddress,
        productName: this.goodsName,
        price: this.goodsPrice,
        count: 1,
      });
      local.set("info-data", this.info);
    },
  },
  computed: {
    sumPrice() {
      let totalPrice = this.chosenList.reduce((total, item) => {
        return (total += item.price * item.count);
      }, 0);
      return totalPrice.toFixed(2);
    },
  },
};
</script>
<style scoped>
#app {
  width: 600px;
  margin: 10px auto;
}

.tb {
  border-collapse: collapse;
  width: 100%;
}

.tb th {
  background-color: #0094ff;
  color: white;
}

.tb td,
.tb th {
  padding: 5px;
  border: 1px solid black;
  text-align: center;
}

.add {
  padding: 5px;
  border: 1px solid black;
  margin-bottom: 10px;
}
.other {
  padding: 20px;
  font-size: 18px;
}
</style>